<script setup>
import {ref,onMounted} from 'vue'
import { queryUser, deleteUser, updateUser } from '@/api/user' 
import { queryUserPage, addUser } from '@/api/user'


const dialogTitle = ref('');
const confirmText = ref('');

//列表数据
const userList = ref([])
//当前操作的用户
const currentUser = ref(null)
//操作类型：add/edit/delete
const actionType = ref('add')

//数据处理
const queryList = async() => {
  let result = await queryUser()
  userList.value = result.data
}

//表单定义
const formData =ref ({
  name: '',
  gender: null
})

//弹框定义
const dialogVisible = ref(false) 

//分页数据定义
const queryForm = ref({
  page: 1,
  pageSize: 5,
  total: 0,
  pages: 1,
})

//定义方法，实现分页查询
const queryUsers = async() => {
  let result = await queryUserPage(queryForm.value)
  userList.value = result.data
  queryForm.value.pages = result.pages
  queryForm.value.total = result.total
}

//页面发送变化
const handleSizeChange = (val) => {
  queryForm.value.pageSize = val
  queryForm.value.page = 1
  queryUsers()
}

//当前页发生变化
const handleCurrentChange = (val) => {
  queryForm.value.page = val
  queryUsers()
}

//新增弹窗（已添加手机号字段）
const addHandler = () => {
  actionType.value = 'add'
  dialogTitle.value = '新增用户'
  confirmText.value = '确定'
  currentUser.value = {
    name: '',
    account: '',
    gender: 1,
    phone: '' 
  }
  dialogVisible.value = true
}

//编辑弹窗
const editHandler = (user) => {
  actionType.value = 'edit'
  dialogTitle.value = '编辑用户'
  confirmText.value = '保存'
  currentUser.value = { ...user }
  dialogVisible.value = true
}

//删除弹窗
const deleteHandler = (user) => {
  actionType.value = 'delete'
  dialogTitle.value = '删除确认'
  confirmText.value = '确认删除'
  currentUser.value = { ...user }
  dialogVisible.value = true
}

//提交表单
const submitForm = async() => {
  if (actionType.value === 'add') {
    await addUser(currentUser.value)
  } else if (actionType.value === 'edit') {
    await updateUser(currentUser.value)
  } else if (actionType.value === 'delete') {
    await deleteUser(currentUser.value.id)
  }
  
  dialogVisible.value = false
  queryList()
}

//预加载
onMounted(() => {
  queryList()
})
</script>

<template>
  <!--表单-->
  <el-form :model="formData" label-width="auto" :inline="true" style="max-width: auto">
    <el-form-item label="姓名">
      <el-input v-model="formData.name" />
    </el-form-item>
    <el-form-item label="性别">
      <el-select v-model="formData.gender" placeholder="选择性别">
        <el-option label="男" value="1" />
        <el-option label="女" value="2" />
      </el-select>
      <el-form-item>
        <el-button type="primary" @click="queryUser">查询</el-button>
      </el-form-item>
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="addHandler">新增</el-button>

  <!--通用弹框-->
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500">
    <el-form v-if="actionType !== 'delete'" :model="currentUser" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="currentUser.name" :disabled="actionType === 'delete'" />
      </el-form-item>
      <el-form-item label="用户名" required>
        <el-input v-model="currentUser.account" :disabled="actionType === 'delete'" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="currentUser.phone" :disabled="actionType === 'delete'" />
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="currentUser.gender" placeholder="选择性别" :disabled="actionType === 'delete'">
          <el-option label="男" value="1" />
          <el-option label="女" value="2" />
        </el-select>
      </el-form-item>
    </el-form>
    
    <div v-if="actionType === 'delete'" style="text-align: center;">
      <p>确定要删除用户 <strong>{{ currentUser.name }}</strong> 吗？</p>
      <p>此操作不可撤销！</p>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm" :type="actionType === 'delete' ? 'danger' : 'primary'">
          {{ confirmText }}
        </el-button>
      </div>
    </template>
  </el-dialog>
  
  <br />
  <br />
  
  <!--表格-->
  <el-table :data="userList" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="account" label="账号" width="180" />
    <el-table-column prop="gender" label="性别" width="180">
      <template #default="scope">
        {{ scope.row.gender == 1 ? '男' : '女' }}
      </template>
    </el-table-column>
    <el-table-column prop="phone" label="手机号" />
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="scope">
        <el-button link type="danger" size="small" @click="deleteHandler(scope.row)">
          删除
        </el-button>
        <el-button link type="primary" size="small" @click="editHandler(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  
  <br />
  
  <!-- 分页 -->
  <div class="demo-pagination-block">
    <div class="demonstration"></div>
    <el-pagination 
      v-model:current-page="queryForm.page" 
      v-model:page-size="queryForm.pageSize"
      :page-sizes="[5, 10, 15, 20]" 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="queryForm.total"
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" 
    />
  </div>
</template>

<style scoped>
</style>